<script setup lang="ts">
import type { TooltipPlacement } from "vidstack";
import Tooltip from "../Tooltip.vue";
import FullscreenIcon from "~icons/media/fullscreen";
import FullscreenExitIcon from "~icons/media/fullscreen-exit";

defineProps<{
  tooltipPlacement: TooltipPlacement
}>();
</script>

<template>
  <Tooltip :placement="tooltipPlacement">
    <template #trigger>
      <media-fullscreen-button
        class="ring-media-focus group relative inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-md outline-none ring-inset hover:bg-white/20 data-[focus]:ring-4 aria-hidden:hidden"
      >
        <FullscreenIcon
          class="media-fullscreen:hidden h-8 w-8"
        />
        <FullscreenExitIcon
          class="media-fullscreen:block hidden h-8 w-8"
        />
      </media-fullscreen-button>
    </template>

    <template #content>
      <span class="media-fullscreen:hidden">Enter Fullscreen/进入全屏</span>
      <span class="media-fullscreen:block hidden">Exit Fullscreen/退出全屏</span>
    </template>
  </Tooltip>
</template>
